<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>论坛列表Vue</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="bbs" id="box">
    <header><span @click="isShow=!isShow">我要发帖</span></header>
    <section>
        <ul>
            <li v-for="(pValue, index) in postList" :key="index">
                <div>
                    <img :src="pValue.src">
                </div>
                <h1>{{pValue.title}}</h1>
                <p>
                    <span>板块: {{pValue.type}}</span>
                    <span>发表时间: {{pValue.time}}</span>
                </p>
            </li>
        </ul>
    </section>
    <div class="post" v-show="isShow">
        <input class="title" placeholder="请输入标题（1-50个字符）" v-model="title">
        所属版块：
        <select v-model="type">
            <option>请选择版块</option>
            <option>电子书籍</option>
            <option>新课来了</option>
            <option>新手报到</option>
            <option>职业规划</option>
        </select>
        <textarea class="content" v-model="content"></textarea>
        <input class="btn" value="发布" @click="toPost"/>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            isShow: false,
            postList: [],
            title: '',
            type: '请选择版块',
            content: ''
        },
        methods: {
            toPost() {
                var tou = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");
                var iNum = Math.floor(Math.random() * 4);  //随机获取头像
                var src = "images/" + tou[iNum];
                var myDate = new Date();
                var currentDate = myDate.getFullYear() + "-" + parseInt(myDate.getMonth() + 1) + "-" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes();
                this.postList.unshift(
                    {src: src, title: this.title, type: this.type, time: currentDate}
                );
                // 重置发帖编辑区
                this.isShow = false;
                this.title = '';
                this.type = '请选择版块';
                this.content = '';
            },
        },
    });
</script>
</html>